<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="included/commons.jsp"%>
<script src="../javascript/jquery-1.4.2.js" language="javascript" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.3/all/jquery.tools.min.js"></script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	font-size: 12px;
}
#sideBar{
    width:200px;
    height:500px;
}
.tooltip {
	display:none;
	background:transparent url(../images/jquerytools/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}
-->
</style>
</head>
<body>
<div id="sideBar"></div>
<form action="${base}test.action" method="post">
    <input type="submit"  value="测试"/>
</form>


<!-- elements with tooltips -->
<div id="demo">
	<img src="image1.jpg" title="The tooltip text #1"/>
	<img src="image2.jpg" title="The tooltip text #2"/>
	<img src="image3.jpg" title="The tooltip text #3"/>
	<img src="image4.jpg" title="The tooltip text #4"/>
</div>
<hr />
<script type="text/javascript">
$("#demo img[title]").tooltip();
</script>
</body>
</html>
